import React, { useState } from 'react';
import { Modal, Table, Input, Space, Button, message } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
// 模板选择模态框
const TemplateSelectionModal = ({
  visible,
  onCancel,
  onConfirm,
  selectedTemplates,
  onSelectionChange,
  templateList
}) => {
  const [searchKeyword, setSearchKeyword] = useState('');

  const filteredTemplateList = templateList
    .filter(template => template.templateName.includes(searchKeyword))
    .sort((a, b) => new Date(b.createTime) - new Date(a.createTime));

  const columns = [
    {
      title: '模板名称',
      dataIndex: 'templateName',
      key: 'templateName',
    },
    {
      title: '模板ID',
      dataIndex: 'templateId',
      key: 'templateId',
    },
    {
      title: '模板描述',
      dataIndex: 'description',
      key: 'description',
      ellipsis: true,
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
    },
  ];

  const rowSelection = {
    selectedRowKeys: selectedTemplates,
    onChange: (selectedRowKeys) => {
      onSelectionChange(selectedRowKeys);
    },
  };

  return (
    <Modal
      title="选择业务模板"
      visible={visible}
      onCancel={onCancel}
      footer={[
        <Button key="cancel" onClick={onCancel}>
          取消
        </Button>,
        <Button key="confirm" type="primary" onClick={onConfirm}>
          确认
        </Button>,
      ]}
      width={800}
    >
      <Space direction="vertical" style={{ width: '100%' }}>
        <Input
          placeholder="搜索模板名称"
          prefix={<SearchOutlined />}
          value={searchKeyword}
          onChange={(e) => setSearchKeyword(e.target.value)}
          style={{ marginBottom: 16 }}
        />
        <Table
          rowSelection={rowSelection}
          columns={columns}
          dataSource={filteredTemplateList}
          pagination={false}
          scroll={{ y: 300 }}
          rowKey="key"
        />
      </Space>
    </Modal>
  );
};

export default TemplateSelectionModal;